import Head from 'next/head';
import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
import ColumnOptionsTable from '../../../components/prop-tables/ColumnOptionsTable';
import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable';
import Example from '../../../examples/disable-column-hiding';

<Head>
  <title>Column Hiding Feature Guide - Mantine React Table Docs</title>
  <meta
    name="description"
    content="How to use, customize, or disable column hiding and visibility features of Mantine React Table"
  />
</Head>

## Column Hiding Feature Guide

The column hiding feature is enabled by default and allows the user to hide data columns from either the column actions menu or the columns menu.

### Relevant Table Options

<TableOptionsTable
  onlyOptions={new Set(['enableHiding', 'onColumnVisibilityChange'])}
/>

### Relevant Column Options

<ColumnOptionsTable onlyOptions={new Set(['enableHiding'])} />

### Relevant State

<StateOptionsTable onlyOptions={new Set(['columnVisibility'])} />

### Hide Columns by Default

You can easily hide columns by default by setting the `columnVisibility` `state` or `initialState` to hide the desired columns by id.

```jsx
const table = useMantineReactTable({
  columns,
  data,
  initialState: {
    columnVisibility: {
      firstName: false, //hide firstName column by default
      'mrt-row-expand': false, //hide row expand column by default
    },
  },
});
```

### Disable Column Hiding

If you do not want this feature to be enabled at all, you can disable it by setting the `enableHiding` prop to `false`.

```jsx
const table = useMantineReactTable({
  columns,
  data,
  enableHiding: false,
});
```

Alternatively, you can disable hiding specific columns by setting the `enableHiding` column option to `false` per column.

If you want to hide certain columns by default, you can specify an column visibility in the `initialState.columnVisibility` prop. This can also be useful for making the column hiding state persistent.

<Example />

### Enable Column Hiding on Display Columns

By default, column hiding is only enabled on data columns. Display columns, such as `mrt-row-numbers`, `mrt-row-select`, etc., do not have column hiding enabled, and their toggle will be disabled. You can turn that back on by setting the `enableHiding` option to `true` in the `displayColumnsOptions` prop.

```jsx
const table = useMantineReactTable({
  columns,
  data,
  displayColumnDefOptions: {
    'mrt-row-numbers': {
      enableHiding: true, //now row numbers are hidable too
    },
  },
});
```

See the [Display Columns Feature Guide](/docs/guides/display-columns#display-column-definition-options-prop) for a more in depth explanation of the `displayColumnsOptions` prop.

View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/features-column-hiding-examples)**
